<template>
  <div class="w100 h100 flex-col" style="background: #fff">
    <div class="logo">
      <div class="flex s-center">
        <img src="@/assets/img/logo.png" style="max-width: 50px; max-height: 50px" alt="" />
        <h1 class="p-l-10" style="color: #3a3f62">{{ TITLE }}</h1>
      </div>
    </div>
    <div class="active wl00 flex-center flex-col">
      <div style="width: 30%">
        <p>激活“{{ TITLE }}”</p>
        <p>您的{{ TITLE }}{{ $store.guarder.pageInfoError }}，请联系经销商重新获取许可证激活系统</p>
      </div>
    </div>
    <div class="content flex-center">
      <div class="flex m-between p-b-10" style="width: 36%">
        <div class="left" style="width:50%">
          <p>软件信息</p>
          <p>软件名称:{{ TITLE }}</p>
        </div>
        <div class="right" style="width:50%">
          <p>扫一扫获取请求码</p>
          <div class="flex-center">
            <div class="p-10 orcode">
              <vue-qr :logoscale="20" :size="109" :text="codevalue" :margin="0" :dotscale="1"
                style="vertical-align: top" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom fl ho flex m-center">
      <div class="flex-col" style="width:30%">
        <p>激活软件</p>
        <p>将请求码发送至经销即可获取许可证</p>
        <div class="flex"><el-input type="textarea" resize="none" v-model="code" placeholder="请输入许可证"></el-input>
          <div class="submit flex-center" @click="submit">立即激活</div>
        </div>
      </div>
      <img class="imgs" src="@/assets/img/key.png" alt="" />
    </div>
  </div>
</template>
<script setup name="/512">
import { getRandom, postUploadLicense } from '@a/verification'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import router from '@/router';
import { TITLE } from '@/config'
let code = ref('');
let codevalue = ref('');
function submit () {
  postUploadLicense({ machine: code,value }).then((res) => {
    router.push('/login');
  });
}
getRandom().then((res) => {
  codevalue.value = res.data;
});
</script>
<style lang="scss" scoped>
.logo {
  padding: 40px;
}

.active {
  box-sizing: border-box;
  padding: 62px 20px;
  background-color: #f4f7ff;

  p:nth-child(1) {
    font-size: 32px;
    font-weight: 900;
    color: #3a3f62;
    line-height: 40px;
    margin: 0;
  }

  p:nth-child(2) {
    font-size: 16px;
    font-weight: normal;
    color: #6a74a5;
    line-height: 24px;
    margin: 16px 0 0 0;
  }
}

.content {
  box-sizing: border-box;
  padding: 0 20px 0 20px;
  font-size: 16px;
  font-weight: normal;
  color: #3a3f62;
  line-height: 24px;

  .left {
    padding-bottom: 20px;
    border-bottom: lpx solid rgba(230, 233, 243, 1);
    border-right: lpx solid rgba(230, 233, 243, 1);

    p:nth-child(1) {
      font-weight: bold;
      margin-top: 32px;
    }
  }

  .right {
    padding-bottom: 20px;
    font-weight: bold;
    text-align: center;
    border-bottom: lpxsolid rgba(230, 233, 243, 1);

    p {
      margin-top: 32px;
    }

    .orcode {
      background: #ffffff;
      box-shadow: 0px 4px 20px px rgba(179, 192, 231, 0.3);
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
    }
  }
}

.bottom {
  position: relative;
  padding:  0 20px 0 20px;
  font-size: 16px;
  color: #3a3f62;
  line-height: 24px;
  p:nth-child(1) {
    font-weight: bold;
    margin-bottom: 0;
  }
  p:nth-child(2) {
    font-size: 16px;
    color: #6a74a5;
    margin: 7px 0 18px 0;
  }
  .imgs {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  :deep(.el-textarea) {
    .el-textarea__inner {
      height: 100%;
      background-color: #ffffff;
      box-shadow: 0px 1px 2px 0px rgba(183, 200, 224, 0.2221);
      border-radius: 8px;
      opacity: 1;
      border: 1px solid #d8e0ef;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right: 0
    }
  }
  .submit {
    width: 22%;
    text-align: center;
    font-size: 14px;
    background: linear-gradient(45deg,#4e89ff 0%, #4a5eff 100%);
    color: var(--system-primary-text-color);
    box-shadow: 0px 4px 16px 0px #b3c0e7;
    border-radius: 0px 8px 8px 0px;
    cursor: pointer;
    &:hover {
      color: var(--el-color-white);
      background: var(--el-color-primary-light-3);
    }
  }
}

</style>